<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>待办事项</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <!-- 
            作业要求:
            1. 实现新增待办事件功能
            2. 根据事项的 status 显示是否为完成状态(完成激活状态类名为 .finish)
            2. 实现 toDoItem 子组件内点击功能
                1) 点击 li 的时候, 给当前 li 添加一个激活类名表示已完成;
                2) 点击 span 删除按钮 的时候, 移除当前 li;

           样式在 ./index.css 内, 可进行自定义修改;  
        -->
  <div id="app">
    <section class="toDoList">
      <div class="toDoHeader">
        <h2>待办事项</h2>
        <input type="text" v-model="value" />
        <button @click="add">添加代办事项</button>
      </div>
      <ul class="toDoBody">
        <!-- 代办事项子组件 -->
        <template v-for='(item,index) in toDoList'>
          <li @click="finish(item)" :key="index" :class="{finish:item.status}">{{item.event}}</li>
        </template>
      </ul>
    </section>
  </div>


  <template id="toDoItem">
    <!-- 结构示例 -->
    <!-- <li>
      <b></b>
      <span class="del">
        <img src="./del.png" alt="" />
      </span>
    </li> -->
  </template>
  <script src="./vue.js"></script>
  <script>
    let toDoItem = {};


    let vm = new Vue({
      el: "#app",
      data: {
        toDoList: [
          {
            event: "吃饭",
            status: false,
          },
          {
            event: "睡觉",
            status: false,
          },
          {
            event: "打豆豆",
            status: false,
          },
        ],
        value: "",

      },
      methods: {
        add() {
          if (this.value == "") {
            alert("请输入")
          } else {
            this.toDoList.push({ event: this.value, status: false });
          }

        },
        finish(item) {
          item.status = true;

        }

      },
    });
  </script>
</body>

</html>